import React from 'react';

class Life extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            "clickCount": 0
        };
    }

    clickFunc = function() {
        const {clickCount} = this.state;
        console.log(clickCount)
        if (clickCount > 2) {
            return;
        }
        this.setState({
            clickCount: clickCount + 1,
        });
    }

    render() {
        console.log('Life', 'render')
        return (
            <div>
                <h2>生命周期 <button onClick={() => this.clickFunc()}>Click</button></h2>
                <ul>
                    <li>组件挂载 componentDidMount</li>
                    <li>更新Dom和refs componentDidUpdate</li>
                    <li>组件卸载 componentWillUnmount</li>
                </ul>
            </div>
        )
    }

    componentDidMount() {
        console.log('Life', 'componentDidMount')
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('Life', 'componentDidUpdate', snapshot);
    }
    componentWillUnmount() {
        console.log('Life', 'componentWillUnmount')
    }
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log('Life', 'shouldComponentUpdate');
        return this.state.clickCount % 2 === 1
    }
    getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log('Life', 'getSnapshotBeforeUpdate');
        return {
            'snapshotBeforeUpdate': 888
        }
    }
}
export default Life